import React from 'react';
import moment from 'moment';
import { Button, WhiteSpace, WingBlank, InputItem } from 'antd-mobile';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import _ from 'lodash';
import Container from '../components/Base/Container';
import { CouponCodeItem } from '../components/Base/CouponCode';
import styles from './CouponCodePage.less';

class CouponPage extends React.Component {
  submit = () => {
    this.props.form.validateFields((error, value) => {
      const result = _.pickBy(value, v => !_.isNil(v) && !_.isEmpty(v));
      this.props.useCouponCode(result);
    });
  };

  render() {
    const { getFieldProps } = this.props.form;
    let useable = (this.props.coupon && this.props.couponCode && this.props.couponCode.status === 1);
    const renderStatus = () => {
      let result = '';
      const { status } = this.props.couponCode;
      const { startDate } = this.props.coupon;
      if (status === 1) {
        result = <span className={styles.couponCodeStatus1}>未使用</span>;
      } else if (status === 2) {
        result = <span className={styles.couponCodeStatus2}>已使用</span>;
      } else if (status === 3) {
        result = <span className={styles.couponCodeStatus3}>已过期</span>;
      }
      if (startDate && moment(startDate).startOf('day').isAfter(moment().startOf('day'))) {
        result = '未到有效期';
        useable = false;
      }
      return result;
    };
    const renderExtraInfo1 = () => {
      const { coupon } = this.props;
      let result1 = coupon.useRules ? coupon.useRules : '无门槛';
      if (coupon.sendType === 1) {
        //
      } else if (coupon.sendType === 2) {
        result1 = `满${coupon.value1 || 0}可用`;
      } else if (coupon.sendType === 3) {
        result1 = `满${coupon.value1 || 0}可用`;
      }

      let result2 = '全品类可用';
      if (coupon.applyItems && coupon.applyItems.length) {
        result2 = '限';
        if (coupon.applyType === 1) {
          result2 += '品类：';
        } else if (coupon.applyType === 2) {
          result2 += '品牌：';
        } else if (coupon.applyType === 3) {
          result2 += '商品：';
        }
        result2 += '仅限';
        result2 += _.map(coupon.applyItems, (item) => item.label).join('、');
        result2 += '（特价商品除外）';
      }
      return result1 + '; ' + result2;
    };
    const renderExtraInfo2 = () => {
      return this.props.coupon.useRules ? <div><span className={styles.couponCodeExtraHead}>使用规则：</span>{this.props.coupon.useRules}</div> : '';
    };
    return (
      <Container title="电子优惠券" className="couponCodeWrap">
        <div
          style={{
            textAlign: 'center',
            height: '100%',
            lineHeight: '100%',
            paddingTop: '5%',
          }}
        >
          <WingBlank>
            <CouponCodeItem type={this.props.couponCode.status} coupon={this.props.coupon} couponCode={this.props.couponCode} />
          </WingBlank>

          <WhiteSpace size="xl" />

          <WingBlank>
            <div className={styles.couponCodeExtra}>
              <div className={styles.couponCodeStatus}>
                {renderStatus()}
              </div>
              <div className={styles.couponCodeInfo1}><span className={styles.couponCodeExtraHead}>使用条件：</span>{renderExtraInfo1()}</div>
              <div className={styles.couponCodeInfo2}>{renderExtraInfo2()}</div>
            </div>
          </WingBlank>

          <WhiteSpace size="xl" />

          {useable && <div className={styles.couponUseFlow}>
            <WingBlank>
              <InputItem
                {...getFieldProps('flow_no', {
                  rules: [{ required: false, message: '请输入销售流水号' }],
                })}
                type="text"
                placeholder="请输入销售流水号"
              />
            </WingBlank>
            <WhiteSpace size="xl" />
            </div>
          }

          <WingBlank>
            <Button
              type="primary"
              disabled={!useable}
              onClick={this.submit}
            >确认核销</Button>
          </WingBlank>

          <WhiteSpace size="xl" />

          <WingBlank>
            <Button
              onClick={() => this.props.back()}
            >返回</Button>
          </WingBlank>
        </div>
      </Container>
    );
  }
}

export default connect((state) => {
  return {
    couponCode: state.coupon.couponCode,
    coupon: state.coupon.coupon,
  };
}, (dispatch, props) => {
  return {
    back: () => {
      dispatch({
        type: 'coupon/back',
        payload: {},
      });
    },
    useCouponCode: (data) => {
      dispatch({
        type: 'coupon/useCouponCode',
        payload: data,
      });
    },
  };
})(createForm()(CouponPage));
